import React, {Component} from 'react';
import $ from 'jquery'
import { Title, formatPrice} from './mixin'
import * as THREE from 'three';
import axios from 'axios'




function init (){
  var scene = new THREE.Scene();
  var camera = new THREE.PerspectiveCamera(45
    , 190 / 190
    , 0.1 ,1000);
  var renderer = new THREE.WebGLRenderer({
    alpha:true,
    antialias: true
  });
  renderer.setSize( 190, 190);
  let sphere
  let sphereGeometry = new THREE.SphereGeometry(33, 20, 20);
  let material = new THREE.MeshPhongMaterial()
  material.map = THREE.ImageUtils.loadTexture(require('./img/123.png'))
  material.transparent = true
  sphere = new THREE.Mesh(sphereGeometry,material);
  scene.add(sphere);
  for(let i of Array(2).keys()){
    let geo = new THREE.SphereGeometry(35, 20 , 20)
    let egh = new THREE.LineSegments(
      new THREE.EdgesGeometry(geo),
      new THREE.LineBasicMaterial({
        color: 0x5babea,
        transparent: true,
        opacity: .08 * (i + 1),
      })
    )
    egh.name = 'earth-wrapper'
    sphere.add(egh)
  }
  

  var light = new THREE.DirectionalLight(0xffffff, 1);
  light.position.set(0, 0 , -100);
  scene.add(light)
  // 相机
  camera.position.z = -100;
  camera.lookAt(scene.position);

  $('#earth').append(renderer.domElement);
  renderer.render(scene, camera);
  //动画循环
  function render() {
    sphere.rotation.y += 0.005;
    renderer.render(scene, camera);
    requestAnimationFrame(render);
  }
  render();
}

function getdata(){
  return new Promise(r =>{
    axios.post('/api/visualData/statisticMood').then(d =>  {
    let arr = d.data.data
    let x = parseInt(arr.find(d => d.positiveOrNegative === 1).doc_count,10)
    let y = parseInt(arr.find(d => d.positiveOrNegative === 0).doc_count,10)
    let z = parseInt(arr.find(d => d.positiveOrNegative === 2).doc_count,10)
    let _arr = [x,y,z]
    r(_arr)
    })
  })
}

function TypeList(props){
  const _lists = props.types
  const lists = _lists.map((d,i) =>{
    let arr = ['正面','中性','负面']
    return (
      <div className='item' key={i.toString()}>
        <div>{arr[i]}</div>
        <div>{formatPrice(d)}</div>
      </div>
    )
  })
  return (
    <div className="types">
      {lists}
    </div>
  )
}
class Total extends Component{
  constructor(props){
    super(props);
    this.state =  {
      types:[],
      typesall:0
    }
  }
  async componentDidMount(){
      init()
      let arr = await getdata()
      let typesall = arr.reduce( (s,d) => {return s+d},0)
      this.setState({
        types:arr,
        typesall:typesall
      })
  }
  render(){
    const total = (
      <div className="yq-total">
        <Title name="当日舆情总量" el="Total public opinion"/>
        <div className="total">
          <div>总量</div>
          <div>{formatPrice(this.state.typesall)}</div>
        </div>

        <div className="earth">
          <div id='earth'></div>
          <div className='img'></div>
        </div>
        <TypeList types = {this.state.types}/>
      </div>
    )
    return total

  }
}

export default Total